<div style="margin-top:20px">
  <form class="layui-form" id="msearchForm">
  
    <div class="layui-inline">
      <label class="layui-form-label" style="width:100px">物料编码</label>
      <div class="layui-input-inline" style="width:120px">
        <input type="text" name="code" class="layui-input"/>
      </div>
    </div>
   <div class="layui-inline">
      <label class="layui-form-label" style="width:100px">物料名称</label>
      <div class="layui-input-inline" style="width:130px;">
        <input type="text" name="name" class="layui-input"/>
      </div>
    </div>
	
    <div class="layui-inline" style="padding-left:15px;">
      <div class="layui-input-inline">
        <button class="layui-btn" id="msearchBtn" type="button">查询</button>
      </div>
    </div>
    
  </div>
 </form>
</div>
<table class="layui-table"  id="materialtab" lay-filter="materialtab">
	
</table>
<script type="text/javascript">
var ins;
$(function(){
	$("input[name='code']").focus();
	ins = layui.use(['table','layer','form'], function(){
		var table = layui.table;
		var form = layui.form;
		ins =table.render({ //其它参数在此省略
		 elem:"#materialtab",
		 url: '/pu/purchaseorder/materias?first=true',
		 cols:[[
			   //fixed 列将会被固定在左或右，不随滚动条而滚动left right
			  {field:'code',width:80, sort: true,title:'编码',fixed:"left"},
		      {field:'name', width:180,title:'名称'},
		      {field:'spec', width:80, sort: true,title:'规格'},
		      {field:'type', width:180,title:'类型'},
		      {width:177,field:'brand',title:'品牌'},
		      {field:'measureUint', width:80, sort: true,title:'计量单位'},
		      {field:'aliasCode', width:80, title:'别名编码'},
		      {field:'aliasName', width:80,title:'别名'},
		      {field:'aliasSpec', width:135,title:'供应商物料规格'},
		      {field:'availableNum',width:177,title:'可用量'} ,
		      {field:'onHandNum', width:80,title:'现存量'},
		      {fixed: 'right', width:100, align:'center',toolbar: '#materialSelectBar'}
		 ]]
	    ,page: true //是否显示分页
	    ,limits: [10,20,50]
	    ,limit:10 //每页默认显示的数量
		  //where:{phone:phone}
		  //method: 'post'
		 ,done:function(res,curr,count){
			 console.log(res);
			 page = curr;
			    //得到当前页码
			 console.log(curr); 
			    //得到数据总量
			 console.log(count);
		 }
		});
		
		//物料选择 选择按钮事件
		table.on('tool(materialtab)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
			 var data = obj.data; //获得当前行数据
			  var layEvent = obj.event; //获得 lay-event 对应的值
			  var tr = obj.tr; //获得当前行 tr 的DOM对象
			  if(layEvent=='select'){
				  //获取数据 回填单元格
				 trobj.find("td[name='name']").html(data.name)
				.end().find("td[name='spec']").html(data.spec)
				.end().find("td[name='type']").html(data.type)
				.end().find("td[name='measureUnit']").html(data.measureUint)
				.end().find("td[name='brand']").html(data.brand)
				.end().find("td[name='sup_code']").html(data.aliasCode)
				.end().find("td[name='sup_name']").html(data.aliasName)
				.end().find("td[name='sup_spec']").html(data.aliasSpec)
				.end().find("td[name='onHandNum']").html(data.onHandNum)
				.end().find("td[name='availableNum']").html(data.availableNum)
				.end().find("input[name='materialId']").val(data.id)
				.end().find("input[name='materialCode']").val(data.code);
				  //关闭层
				 layer.close(materialDialogIdx);
				  
				//如果点击的是最后一行
				if(trobj.nextAll().length==0){
					$("#contentTab tbody").append($("#blankTpl tr").parent().html());
					form.render();
				}
			  }
		});
		
		$("#msearchBtn").click(function(){
			trobj = $(this).parents("tr");
		    ins.reload({url: '/pu/purchaseorder/materias',where:$("#msearchForm").serializeJson()});
		});
		
	});
	
	
	
});
</script>
<script type="text/html" id="materialSelectBar">
<a class="layui-btn layui-btn-mini" lay-event="select">选择</a>
</script>